<template>
	<view class="content">
		<u-field label-width="150" name="bank_name"
		 v-model="userForm.bank_name" label="开户行" placeholder="请输入开户行">
		</u-field>
		<u-field label-width="150" name="bank_province" 
		v-model="userForm.bank_province" label="开户行省份" placeholder="请输入开户行省份">
		</u-field>
		<u-field label-width="150" name="bank_city" 
		v-model="userForm.bank_city" label="开户行城市" placeholder="请输入开户行城市">
		</u-field>
		<u-field label-width="150" name="bank_branch" 
		v-model="userForm.bank_branch" label="开户行支行" placeholder="请输入开户行支行">
		</u-field>
		<u-field label-width="150" name="bank_card"
		 v-model="userForm.bank_card" label="账号" placeholder="请输入账户"></u-field>
		<u-field label-width="150" name="member_name" 
		v-model="userForm.member_name" label="姓名" placeholder="请输入姓名"></u-field>
		<view style="margin: 80upx 45upx;">
			<u-button style="" @click="formSubmit" type="error">提交</u-button>
		</view>

	</view>
</template>

<script>
	import WxValidate from '@/common/utils/WxValidate.js'
	export default {
		data() {
			return {
				userForm: {
					"member_name": "", //姓名
					"bank_card": "", //卡号
					"bank_name": "", //开户行
					"bank_province": "", //开户省
					"bank_city": "", //开户市
					"bank_branch": "" //开户支行
				},
			};
		},
		onLoad() {
			this.initValidate();
			this.getbankDetail();
		},
		methods: {
			// 获取支付宝信息
			getbankDetail() {
				this.$api.get('/addons/yun_shop/api.php?route=member.bank-card.getbank&ingress=weChatApplet&validate_page=1&app_type=wechat').then(res => {
					this.userForm = Object.assign({}, this.userForm , res.data);
				})
			},
			// // 绑定银行卡
			actionSetingali(){
				this.$api.post('/addons/yun_shop/api.php?route=member.bank-card.edit&ingress=weChatApplet&validate_page=1&app_type=wechat', this.userForm).then(res => {
					uni.showToast({
						title: res.msg
					})
					setTimeout(() => {
						this.$Router.back();
					}, 1500);
				})
			},
			// 初始化验证规则
			initValidate() {
				const rules = {
					member_name: {
						required: true
					},
					bank_card: {
						required: true
					},
					bank_name: {
						required: true
					},
					bank_province: {
						required: true
					},
					bank_city: {
						required: true
					},
					bank_branch: {
						required: true
					},
				}
				const messages = {
					member_name: {
						required: "请输入姓名"
					},
					bank_card: {
						required: "请输入卡号"
					},
					bank_name: {
						required: "请输入姓名"
					},
					bank_province: {
						required: "请输入省份"
					},
					bank_city: {
						required: "请输入城市"
					},
					bank_branch: {
						required: "请输入支行"
					},
				}
				this.WxValidate = new WxValidate(rules, messages)
			},
			//验证信息弹出
			showModal(error) {
				uni.showToast({
					title: error.msg,
					icon: "none"
				})
			},
			// 提交验证
			formSubmit() {
				if (!this.WxValidate.checkForm(this.userForm)) { //获取表单信息进行验证
					this.showModal(this.WxValidate.errorList[0])
					return false
				}
				this.actionSetingali();
			},
		}
	}
</script>

<style scoped lang="scss">
	@import './bank-detail.scss';
</style>
